<template>
  <ClientTitleBar title="注册" class="login-title" />
  <div class="register-wrapper">
    <h4>注册</h4>
    <el-form
      ref="registerFormRef"
      style="max-width: 600px"
      :model="registerForm"
      :rules="registerRules"
      label-width="auto"
      class="registerFormClassName"
    >
        <el-form-item label="头像" prop="titleSrc">
            <div style="width: 410px;">
              <CustomUpload placeholder="头像" v-model:src="registerForm.titleSrc" :aspectRatio="1/1"/>
            </div>
        </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input clearable v-model="registerForm.userName" />
      </el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input type="password" show-password clearable v-model="registerForm.passWord" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input clearable v-model="registerForm.nickName" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="registerForm.sex">
          <el-radio value="3">未知</el-radio>
          <el-radio value="1">男</el-radio>
          <el-radio value="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="ok" :loading="registerLodingRef" @click=" handleSubmit(registerFormRef)">
          确定
        </el-button>
        <el-button class="reset" @click="handleReset(registerFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { inject ,h } from 'vue';
import { useRouter } from 'vue-router';
import useSymbols from '../../compostions/useSymbols';
import { ElMessage } from 'element-plus'
import CustomUpload from '../../components/CustomUpload/index.vue'
import ClientTitleBar from '../../components/ClientTitleBar/index.vue';

const router = useRouter();

const { registerLodingRef , registerFormRef, registerForm , registerRules , registerResetForm , registerSubmitForm} = inject(useSymbols);

const handleSubmit=(formRef)=>{
  registerSubmitForm(formRef,message , back );
}

const handleReset = async (formRef) => {
  await registerResetForm(formRef);
  back('/login');
}

// 跳转和消息提示
const back = (path = '/') => {
  router.replace(path);  
}

/**
 * 消息提示
 * @param {*} param 
 */
const message = (param = { type:'success', message:''}) => {
  return new Promise((resolve, reject) => {
    ElMessage({
      message: param.message,
      type: param.type,
      duration:1500,
    })
    setTimeout(() => {
      resolve('success');
    }, 1500);
  })
}

</script>
<style scoped lang="less">
.register-wrapper{
    width: 500px;
    height: calc(100% - 30px);
    box-sizing: border-box;
    margin: 0 auto;
    h4{
      width:100%;
      font-size: 28px;
      color: #333;
      text-align: center;
    }
    .registerFormClassName{
        .cover{
            @wh:120px;
            width: @wh;
            height: @wh;
            border: 1px dashed #e1e1e1;
            border-radius: 10px;
            .icon{
                width: 100%;
                height: 100%;
                font-size: 30px;
                color: #999;
            }
        }
    }
    .ok{
      background-color: var(--system-primary-color);
      border-color:  var(--system-primary-color);
      border-radius: 999px;
      width: 220px;
      margin-left: 10px;
      &:hover{
        filter: brightness(1.1);
      }
    }
    .reset{
      width: 220px;
      border-radius: 999px;
      &:hover{
        background-color: #fff;
        border-color: var(--system-primary-color);
        color: var(--system-primary-color);
        outline: none;
      }
    }

    // 改变element-ui 默认颜色
    /deep/ .el-input{
      width: 400px;
    }
    /deep/ .el-input__wrapper.is-focus{
      box-shadow: 0 0 0 1px var(--system-primary-color);
    }
    /deep/ .el-radio__input.is-checked .el-radio__inner{
      background: var(--system-primary-color);
      border-color: var(--system-primary-color);
    }
    /deep/ .el-radio__input.is-checked+.el-radio__label{
      color: var(--system-primary-color);
    }
}
</style>
